<template>
	<view class="prefer_content">
		<!-- 标题 -->
		<view class="prefer_title">为你优选</view>
		<scroll-view class="scroll" scroll-x="true" scroll-with-animation="true">
			<view class="prefer_dis">
				<block v-for="(item,index) in preferdata" :key="index">
					 <view class="prefer_view">
						 <image :src="item.image" mode="aspectFill"></image>
						 <text>{{item.title}}</text>
						 <text>{{item.lable}}</text>
					 </view>
				</block>
			</view>			
		</scroll-view>            
	</view>
</template>

<script>
	export default{
		/* props:{
			preferdata:Array
		} */
		data(){
			return{
				preferdata:[
					{
						'image':'../../../static/pre/niupai.jpg',
						'title':'特别推荐',
						'lable':'晚餐必备'
					},
					{
						'image':'../../../static/pre/shaokao.jpg',
						'title':'特别推荐',
						'lable':'晚餐必备'
					},
					{
						'image':'../../../static/pre/paigu.jpeg',
						'title':'特别推荐',
						'lable':'晚餐必备'
					}
				]
			}
		}
	}
</script>

<style scoped>
	.prefer_content{margin: 30upx 0;}
	.prefer_title{
		font-size: 35upx;
		height: 50upx;
		line-height: 50upx;
		margin-bottom: 20upx;
	}
	.scroll{
		white-space: nowrap;
		width: 100%;
		height: 300upx;
	}
	.prefer_dis{
		display: flex;
		justify-content: space-between;
	}
	.prefer_view{
		height: 300upx;
		width: 300upx;
		padding: 0 8upx;
	}
	.prefer_view image{
		height: 200upx;
		width: 300upx;
		border-radius: 8upx;
	}
	.prefer_view text{
		height: 45upx;
		line-height: 45upx;
		/* 超出隐藏 */
		display: -webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:1;
		overflow: hidden;
	}
	.prefer_view text:nth-child(2){
		font-size: 30upx;
	}
	.prefer_view text:nth-child(3){
		font-size: 27upx;
		color: #9c9c9c;
	}
	.prefer_dis view:nth-child(2){
		padding: 0 7upx !important;
	}
</style>
